<template>
  <div class="main2 animate__animated animate__fadeInRightBig">
    <div class="title">自我介绍</div>
    <div class="item">
      <span>您为什么要使用该服务?</span>
      <el-select v-model="gz" class="m-2" placeholder="工作" size="large" @change="setWork">
        <el-option v-for="item in gzArr" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="item">
      <span>什么最能描述你?</span>
      <el-select v-model="desc" class="m-2" placeholder="公司高管" size="large" @change="setDesc">
        <el-option v-for="item in descArr" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="footer">
      <span>什么最能描述你?</span>
      <el-radio-group v-model="isUse" class="ml-4">
        <el-radio label="1" size="large">是的</el-radio>
        <el-radio label="2" size="large">不</el-radio>
      </el-radio-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ISelect } from '@/types/element';
defineProps<{ desc: string, work: string }>()
const emits = defineEmits(["update:desc", "update:work"])

const gz = ref("");
const desc = ref("");
const isUse = ref("1");

const gzArr = ref<ISelect[]>([{ value: "1", label: "IT工程师" }, { value: "2", label: "前端工程师" }])
const descArr = ref<ISelect[]>([{ value: "1", label: "公司高管" }, { value: "2", label: "HR" }])

function setWork(e: string) {
  emits("update:work", gzArr.value.find(item => item.value == e)?.label)
}

function setDesc(e: string) {
  emits("update:desc", descArr.value.find(item => item.value == e)?.label)
}
</script>

<style lang="scss" scoped>
.main2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: -230px;

  .title {
    font-weight: bold;
    font-size: 25px;
  }

  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #747d8c;
    width: 400px;
    gap: 10px;
    text-align: left;

    >span {
      font-size: 14px;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #747d8c;
    font-size: 13px;
  }
}
</style>